<template>
  <div class="detail-form" :class="h5 ? 'h5-container' : 'ep-container'">
    <div v-for="(item, index) in detailCells" :key="index" class="detail-cell" :class="cellClass" :style="cellStype">
      <div v-if="item.widget" class="detail-cell__filelist">
        <m-fileupload
          v-if="item.widget.type === 'fileupload'"
          :model-value="item.value"
          :item="item.widget"
          :index="0"
          :h5="h5"
          detail
        />
        <m-correlation
          v-if="item.widget.type === 'correlation'"
          :model-value="item.value"
          :item="item.widget"
          :index="0"
          :h5="h5"
          detail
        >
          <template v-if="$slots.correlation" #default="{ item: correlationItem }">
            <slot name="correlation" :item="correlationItem" />
          </template>
        </m-correlation>
      </div>
      <template v-else>
        <div class="detail-cell__title">
          {{ item.title }}
        </div>
        <div class="detail-cell__value">
          {{ item.value }}
          <span v-if="item.append" class="detail-cell__append">
            {{ item.append }}
          </span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { computed, onMounted, getCurrentInstance } from 'vue'

export default {
  name: 'DetailForm',
  props: {
    /** 是否渲染H5 UI组件 */
    h5: {
      type: Boolean,
      default: false
    },
    /** 表单组件列表 */
    widgetList: {
      type: Object,
      required: true
    },
    /** 表单展示数据 */
    formData: {
      type: Object,
      required: true
    },
    /** 字体颜色 */
    color: {
      type: String,
      default: null
    },
    /** 字体大小 */
    fontSize: {
      type: [String, Number],
      default: null
    },
    /** 标题颜色 */
    labelColor: {
      type: String,
      default: null
    },
    /** 标题大小 */
    labelFontSize: {
      type: [String, Number],
      default: null
    },
    /** 标题宽度 */
    labelWidth: {
      type: [String, Number],
      default: null
    },
    /** 附加样式 */
    cellClass: {
      type: String,
      default: ''
    },
    /** 隐藏el-form字段 */
    hideElform: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const { proxy } = getCurrentInstance()
    const cellStype = computed(() => {
      const style = {}
      if (props.color) {
        style.color = props.color
      }
      if (props.fontSize) {
        if (typeof props.fontSize === 'number') {
          style.fontSize = props.fontSize + 'px'
        }
        if (typeof props.fontSize === 'string') {
          style.fontSize = props.fontSize
        }
      }
      return style
    })

    const formLabelWidth = computed(() => {
      if (props.labelWidth) {
        if (typeof props.labelWidth === 'number') {
          return props.labelWidth + 'px'
        }
        if (typeof props.labelWidth === 'string') {
          return props.labelWidth
        }
      }
      return '80px'
    })

    const detailCells = computed(() => {
      const list = []
      props.widgetList.forEach((item) => {
        // 处理card
        if (item.type === 'card') {
          item.components.forEach((e) => {
            list.push(addItem(e))
          })
        } else {
          list.push(addItem(item))
        }
      })
      if (props.hideElform) {
        return list.filter((x) => !x.widget)
      }
      return list
    })

    const addItem = (item) => {
      const { name, label: title } = item.options
      const obj = {
        name,
        title,
        value: props.formData[name]
      }
      // 处理input append
      if (item.type === 'input' && item.options.append) {
        obj.append = item.options.append
      }
      // 处理m-select
      if (item.type === 'select') {
        const { optionItems, _optionItems } = item.options
        if (_optionItems) {
          const first = _optionItems.find((m) => String(m.value) === String(obj.value))
          if (first) {
            obj.value = first.label
          }
        } else {
          const first = optionItems.find((m) => String(m.value) === String(obj.value))
          if (first) {
            obj.value = first.label
          }
        }
      }
      // 处理可渲染详情组件
      if (item.type === 'fileupload' || item.type === 'correlation') {
        obj.widget = item
      }
      return obj
    }

    onMounted(() => {
      props.widgetList.forEach((item) => {
        if (item.type === 'select') {
          const { source, action } = item.options
          if (source === 'dynamic') {
            axios
              .get(action)
              .then((res) => {
                console.log('res :>> ', res)
                item.options['_optionItems'] = res.data.result || res.data
              })
              .catch((error) => {
                console.log('error :>> ', error)
              })
          }
        }
      })
    })

    return {
      cellStype,
      formLabelWidth,
      detailCells
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-form {
  &.ep-container {
    position: relative;
    .detail-cell {
      display: flex;
      font-size: 14px;
    }
    .detail-cell__title {
      width: 80px;
      display: inline-flex;
      justify-content: flex-end;
      align-items: flex-start;
      flex: 0 0 auto;
      font-size: 14px;
      color: #606266;
      height: 32px;
      line-height: 32px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
    .detail-cell__value {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      flex: 1;
      line-height: 32px;
      position: relative;
      font-size: 14px;
      min-width: 0;
    }
    .detail-cell__append {
      padding-left: 8px;
    }
    .detail-cell__filelist {
      width: 100%;
    }
  }

  &.h5-container {
    position: relative;
    .detail-cell {
      display: flex;
      font-size: 14px;
    }
    .detail-cell__append {
      padding-left: 8px;
    }
    .detail-cell__filelist {
      width: 100%;
    }

    .detail-cell__title {
      font-size: 14px;
      color: #727484;
      height: 26px;
      line-height: 26px;
      flex: 1;
    }

    .detail-cell__value {
      font-size: 14px;
      color: #727484;
      height: 26px;
      line-height: 26px;
      flex: 1;
      position: relative;
      overflow: hidden;
      text-align: right;
      vertical-align: middle;
      word-wrap: break-word;
    }
  }

  :deep(.el-upload--picture-card) {
    display: none;
  }
  :deep(.el-upload--picture) {
    display: none;
  }
  :deep(.el-upload-list__item-status-label) {
    display: none !important;
  }
  :deep(.el-icon--close) {
    display: none !important;
  }
  :deep(.m-van-cell) {
    padding: 0;
  }
}
</style>
